<template>
    <scroll>
      <div class="recommend-container">
        <section class="title-container">
          <div class="title-left">
            <h2>{{score}}</h2>
            <p>综合评分</p>
            <span>高于周边商家29.1%</span>
          </div>
          <div class="title-right">
            <ul class="title-right-item" v-for="item in recommendContent">
              <li class="content">{{item.name}}</li>
              <li class="star"><star :score="item.score"></star></li>
              <li class="score">{{item.score}}</li>
            </ul>
          </div>
        </section>
        <section class="recommend-tag">
          <tag :data="tagList"></tag>
        </section>
        <section class="recommend-body">
          <recommend-item :ratings="data"></recommend-item>
        </section>
      </div>
    </scroll>
</template>

<script>
    import Star from "./star";
    import Tag from "../../../components/tag/tag";
    import Scroll from "../../../components/scroll/scroll";
    import RecommendItem from "./recommend-item";

    export default {
      components: {
        RecommendItem,
        Scroll,
        Tag,
        Star},
      name: "recommend",
      props: {
        data: {
          type: Array,
          default: null
        }
      },
      data () {
        return {
          score: 0,
          recommendContent: [
            {
              name: "服务态度",
              score: 4.5
            },
            {
              name: "商品评分",
              score: 4.1
            },
            {
              name: "送达时间",
              score: 4.1
            }
          ],
          tagList: [
            {
              content: '全部',
              length: 12
            },
            {
              content: '满意',
              length: 3
            },
            {
              content: '不满意',
              length: 4
            },
            {
              content: '有图',
              length: 4
            },
            {
              content: '送货慢',
              length: 1
            }
          ]
        }
      },
      mounted () {
        setTimeout(() =>{
          this.average()
        }, 20)
      },
      methods: {
        average () {
          let total = 0
          this.recommendContent.forEach((item) => {
            total += item.score
          })
          this.score = (total/this.recommendContent.length).toFixed(1)
        }
      }
    }
</script>

<style scoped>
  .recommend-container{
    margin-top: 4px;/*rem*/
  }
  .recommend-container .title-container{
    display: flex;
    height: 140px;/*rem*/
    background-color: #ffffff;
  }
  /*.recommend-container .title-container .title-left:after{*/
    /*content: "";*/
    /*height: 100px;!*rem*!*/
    /*border-right: 1px solid #f0f0f0;!*rem*!*/
    /*transform: translateY(20%);*/
  /*}*/
  .recommend-container .title-container .title-left{
    text-align: center;
    font-size: 0;
    padding: 0 50px;/*rem*/
  }
  .recommend-container .title-container .title-left h2{
    font-size: 32px;/*px*/
    color: #ec6045;
    font-weight: bold;
  }
  .recommend-container .title-container .title-left p{
    font-size: 18px;/*px*/
    color: #686868;
  }
  .recommend-container .title-container .title-left span{
    font-size: 18px;/*px*/
    color: #9f9f9f;
  }
  .recommend-container .title-container .title-right{

  }
  .recommend-container .title-container .title-right .title-right-item{
    display: flex;
    margin-top: 10px;/*rem*/
  }
  .recommend-container .title-container .title-right .title-right-item .content{
    font-size: 20px;
    color: #666666;
    margin-right: 36px;/*rem*/
  }
  .recommend-container .title-container .title-right .title-right-item .star{
    font-size: 18px;/*px*/
    color: #a1a1a1;
    margin-right: 36px;/*rem*/
  }
  .recommend-container .title-container .title-right .title-right-item .score{
    font-size: 16px;
    color: #ec6146;
  }
  .recommend-container .recommend-tag{
    margin-top: 20px;/*rem*/
    background-color: #ffffff;
  }
  .recommend-body{
    background-color: #ffffff;
  }
</style>
